<template>
  <el-form ref="drugFormRef" :model="drugForm">
    <el-table v-adaptive :border="true" :data="drugForm.allergyTestingConfirmList" :header-cell-style="$headerCellStyle"
              :stripe="true" highlight-current-row>
      <el-table-column :align="'center'" fixed="left" label="住院号/门诊号" prop="hospitalNoOrClinicNo" width="130">
        <template #default="scope">
          <span class="ys-css">{{ scope.row.hospitalNoOrClinicNo }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'left'" :header-align="'center'" fixed="left" label="患者信息" prop="name" width="130">
        <template #default="scope">
          <span class="ys-css">{{ scope.row.name }}</span>
          <span class="mr10" style="margin-left: -10px">
                <svg-icon :icon-class="dictStore.getMateDictInfo(
                    dictDataMap['sys_user_sex'],
                    scope.row.sex
                ).dictValue === '1'
                    ? 'man'
                    : 'woman'
                    " style="margin-left: 10px"/>
              </span>
          {{ scope.row.ageAll }}
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="住院/门诊" prop="inoroutFlag" width="80">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['clinic_or_visit']" :value="scope.row.inoroutFlag"/>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="申请单号" prop="applyNo" width="110"/>
      <el-table-column :align="'center'" label="开单科室" prop="applyDeptName" width="80"/>
      <el-table-column :align="'left'" :header-align="'center'" :show-overflow-tooltip="true" label="药品名称"
                       prop="drugName" width="180">
        <template #default="scope">
          <span style="font-weight: bold;font-size: 14px">{{ scope.row.drugName }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'right'" label="规格" prop="packageSpec" width="60"/>
      <el-table-column :align="'left'" label="单位" prop="packageUnits" width="50"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="单次用量" prop="singleDosage"
                       width="100">
        <template #default="scope">
          {{ scope.row.singleDosage }}<span class="ys-css ml5">{{ scope.row.singleUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="皮试操作人" prop="operatePerson" width="110">
        <template #default="scope">
          <template v-if="scope.row.operatePersonShow">
            {{ scope.row.operatePersonName }}
          </template>
          <template v-else>
            <el-select v-model="scope.row.operatePerson"
                       class="input"
                       placeholder="请选择操作人"
                       style="width: 100%"
                       @change="handleSave(scope.row,'N')"
            >
              <el-option
                v-for="user in operatorUserList"
                :key="user.userId"
                :label="user.nickName"
                :value="user.userId"
              ></el-option>
            </el-select>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="皮试操作时间" prop="operateTime" width="180">
        <template #default="scope">
          <template v-if="scope.row.operateTimeShow">
            <span>{{ $parseTime(scope.row.operateTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
          </template>
          <template v-else>
            <el-date-picker v-model="scope.row.operateTime" class="input" placeholder="请选择操作时间"
                            style="width: 100%" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                            @change="handleSave(scope.row,'N')">
            </el-date-picker>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="1分钟后结果" prop="oneMinuteResult" width="90">
        <template #default="scope">
          <template v-if="scope.row.oneMinuteResultShow">
            <dict-data-tag :options="dictDataMap['allergy_testing_result']" :value="scope.row.oneMinuteResult"/>
          </template>
          <template v-else>
            <el-select v-model="scope.row.oneMinuteResult"
                       class="input"
                       clearable filterable
                       placeholder="请选择"
                       style="width: 100%"
                       @change="handleSave(scope.row,'N')"
            >
              <el-option
                v-for="dict in dictDataMap['allergy_testing_result']"
                :key="dict.dictValue"
                :disabled="dict.disabled"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="15分钟后结果" prop="fifteenMinuteResult" width="95">
        <template #default="scope">
          <template v-if="scope.row.fifteenMinuteResultShow">
            <dict-data-tag :options="dictDataMap['allergy_testing_result']" :value="scope.row.fifteenMinuteResult"/>
          </template>
          <template v-else>
            <el-select v-model="scope.row.fifteenMinuteResult"
                       class="input"
                       clearable filterable
                       placeholder="请选择"
                       style="width: 100%"
                       @change="handleSave(scope.row,'N')"
            >
              <el-option
                v-for="dict in dictDataMap['allergy_testing_result']"
                :key="dict.dictValue"
                :disabled="dict.disabled"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="30分钟后结果" prop="thirtyMinuteResult" width="95">
        <template #default="scope">
          <template v-if="scope.row.thirtyMinuteResultShow">
            <dict-data-tag :options="dictDataMap['allergy_testing_result']" :value="scope.row.thirtyMinuteResult"/>
          </template>
          <template v-else>
            <el-select v-model="scope.row.thirtyMinuteResult"
                       class="input"
                       clearable filterable
                       placeholder="请选择"
                       style="width: 100%"
                       @change="handleSave(scope.row,'N')"
            >
              <el-option
                v-for="dict in dictDataMap['allergy_testing_result']"
                :key="dict.dictValue"
                :disabled="dict.disabled"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="60分钟后结果" prop="sixtyMinuteResult" width="95">
        <template #default="scope">
          <template v-if="scope.row.sixtyMinuteResultShow">
            <dict-data-tag :options="dictDataMap['allergy_testing_result']" :value="scope.row.sixtyMinuteResult"/>
          </template>
          <template v-else>
            <el-select v-model="scope.row.sixtyMinuteResult"
                       class="input"
                       clearable filterable
                       placeholder="请选择"
                       style="width: 100%"
                       @change="handleSave(scope.row,'N')"
            >
              <el-option
                v-for="dict in dictDataMap['allergy_testing_result']"
                :key="dict.dictValue"
                :disabled="dict.disabled"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="皮试结果确认人" prop="confirmPerson" width="110">
        <template #default="scope">
          <template v-if="scope.row.confirmPersonShow">
            {{ scope.row.confirmPersonName }}
          </template>
          <template v-else>
            <el-select v-model="scope.row.confirmPerson" class="input"
                       placeholder="请选择确认人"
                       style="width: 100%"
                       @change="handleSave(scope.row,'Y')"
            >
              <el-option
                v-for="user in operatorUserList"
                :key="user.userId"
                :label="user.nickName"
                :value="user.userId"
              ></el-option>
            </el-select>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="皮试结果确认时间" prop="confirmTime" width="180">
        <template #default="scope">
          <template v-if="scope.row.confirmTimeShow">
            <span>{{ $parseTime(scope.row.confirmTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
          </template>
          <template v-else>
            <el-date-picker v-model="scope.row.confirmTime" class="input"
                            placeholder="请选择确认时间" style="width: 100%" type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss" @change="handleSave(scope.row,'Y')">
            </el-date-picker>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script lang="ts" setup>
import {listAllergyTestingConfirm, updateAllergyTestingConfirm} from "@/api/infusion/allergyTestingConfirm.ts";

import {useDictStoreHook} from "@/store/modules/dict";
import {getDeptVsUserInfo} from "@/api/system/dept.ts";


const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('allergy_testing_result', 'clinic_or_visit', 'sys_user_sex'))

const {proxy} = getCurrentInstance() as any;
const currentSelectDept = proxy.$currentSelectDept
const emits = defineEmits(["allergyUpdateOk"])
const operatorUserList = ref<any>([])

const drugForm = ref<any>({
  allergyTestingConfirmList: []
})

const props = defineProps({
  queryParams: {
    type: Object,
    default: {}
  },
  dateRange: {
    type: Array,
    default: []
  }
})


/** 查询过敏实验(皮试)确认列表 */
function getList() {
  listAllergyTestingConfirm(proxy.$addDateRange(props.queryParams, props.dateRange)).then((response: resType) => {
    drugForm.value.allergyTestingConfirmList = response.data;
    drugForm.value.allergyTestingConfirmList.forEach((item: any) => {
      item.operatePersonShow = item.operatePerson
      item.confirmPersonShow = item.confirmPerson
      item.oneMinuteResultShow = item.oneMinuteResult
      item.fifteenMinuteResultShow = item.fifteenMinuteResult
      item.thirtyMinuteResultShow = item.thirtyMinuteResult
      item.sixtyMinuteResultShow = item.sixtyMinuteResult
      item.confirmTimeShow = item.confirmTime
      item.operateTimeShow = item.operateTime
    })
  });
}


/**
 * 通过科室id获取本科室下所有存在的用户
 */
function getDeptVsUserInfoFun() {
  const params = {
    deptId: currentSelectDept,
  }
  getDeptVsUserInfo(params).then((res: resType) => {
    operatorUserList.value = res.data
  })
}


/**
 * 提交按钮
 * @param row
 * @param type Y 表示为结果确认操作，后台会反写数据到对应的业务表中
 */
function handleSave(row, type) {
  row.isUpdateBusiness = type
  updateAllergyTestingConfirm(row).then(() => {
    ElMessage.success("录入成功");
    getList();
  }).finally(() => {
  });
}


getDeptVsUserInfoFun()

defineExpose({
  getList
})
</script>

<style scoped>
:deep(.input .el-input__wrapper) {
  background-color: #f7a0a02b !important;
}

:deep(.input .el-select__wrapper) {
  background-color: #f7a0a02b !important;
}

/* 列表点击行高亮 */
:deep(.el-table__body tr.current-row>td) {
  background-color: #e9e9e9 !important;
  color: #5f5f5f;
}

</style>
